<template>
    <div class="home">
       <s-card title="按钮" width="100%">
         <s-button  type="default">Default</s-button>
         <s-button type="primary">Primary</s-button>
         <s-button type="danger">Danger</s-button>
         <s-button type="default" icon="icon-play-fill">icon</s-button>

       </s-card>

       <s-card title="消息"  width="100%">
         <s-button @click="Message.info('info信息')">Info</s-button>
         <s-button @click="Message.warn('warn信息')">Warn</s-button>
         <s-button @click="Message.error('error信息')" type="danger">Error</s-button>
         <s-button  @click="Message.success('success信息')" type="primary">Success</s-button>
       </s-card>

       <s-card title="复选框"  width="100%">
         <s-checkbox label="开启" :checked="state.open" name="open" @update="updateForm"/>
         <hr/>
         <s-checkbox-group
            name="selectedKeys"
            :value="state.selectedKeys"
            :options="[{label:'1',value:1},{label:'2',value:2}]"
            @update="changeOptions"
         />
       </s-card>

       <s-card title="单选框"  width="100%">
         <s-radio-group :options="[{label:'男',value:'0'},{label:'女',value:'1'}]" name="sex" :value="state.sex" @update="updateForm"/>
         <hr/>
         <s-radio-group :options="[{label:'男',value:'0'},{label:'女',value:'1'}]" name="sex" :value="state.sex" @update="updateForm" layout="column"/>
       </s-card>
    </div>
 </template>

<script lang="ts" setup>
import { SButton, SCard, Message, SCheckbox, SRadioGroup, SCheckboxGroup } from "@/components"
import { BaseForm } from "types"
import { reactive } from "vue"

type State={
   open:boolean,
   sex:string,
   selectedKeys:string[] | [],
   [index:string]:boolean|string|number|undefined|Array<any>
}

const state = reactive<State>({
  open: false,
  sex: "1",
  selectedKeys: []
})

const updateForm = (params:BaseForm) => {
  state[params.name] = params.value
}

const changeOptions = (keys, options) => {
  console.log(keys, options)
}

</script>

 <style scoped lang="less">
    .home {
       display: grid;
       grid-template-columns: 1fr 1fr;
       column-gap: 64px;
    }
 </style>
